<template>
    <div id="modulesNameVueName">
    	<vae-panel v-loading="loading" :org="org.show" :show_check="org.check" :current_key="org.current_key" class="vae-table-complex"  @orgChoose="orgChoose" :title="vae_title">
    		<!-- 主查询区域 -->
		    <template v-slot:actions>
		      <el-input placeholder="名称" v-model="query.keyword" @keyup.enter.native="doSearch" clearable @clear="doSearch"></el-input>
		      <el-button @click="doSearch" type="primary" icon="fas fa-search">查询</el-button>
		      <el-button @click="doResetSearch" type="danger" icon="fas fa-ban">清空</el-button>
		    </template>
		    <!-- 额外的查询区域 -->
    		<template v-slot:extra>
    			<el-row :gutter="30">
    				<el-col :span="8">
	    				<el-form-item label="状态">
			              <el-select v-model="query.status" placeholder="请选择" clearable>
			                <el-option v-for="item in status_list" :key="item.id" :label="item.label" :value="item.id"></el-option>
			              </el-select>
			            </el-form-item>
			        </el-col>
    			</el-row>
    		</template>
		    <!-- 针对主要内容的操作按钮区域:【注意】修改按钮权限的api地址 -->
		    <template v-slot:content_opt v-if="hasFn('api/xxx/xxx','add') || hasFn('api/xxx/xxx','delete')">
		        <el-button v-if="hasFn('api/xxx/xxx','add')" @click="doAdd" type="primary" icon="fas fa-plus">新增</el-button>
		        <el-button v-if="hasFn('api/xxx/xxx','delete')" @click="doDeleteBatch" type="danger" icon="fas fa-trash">删除</el-button>
		    </template>
		    <!-- 主要内容区域 -->
		    <template v-slot:content>
		    	<el-row>
			        <el-table :data="table.data" @selection-change="selectionChange">
			          <el-table-column type="selection" width="30"></el-table-column>
			          <el-table-column label="#" width="40" :formatter="formatterIndex"></el-table-column>
			          <el-table-column prop="name" label="名称" min-width="90" show-overflow-tooltip></el-table-column>
			          <el-table-column label="状态" width="80" prop="status">
			            <template v-slot:default="{ row }">
			              <el-tag effect="plain" size="mini" :type="stateType(row.status)">{{row.status}}</el-tag>
			            </template>
			          </el-table-column>
			          <el-table-column label="操作" width="200">
			          	<!-- 【注意】修改按钮权限的api地址 -->
			            <template v-slot:default="{ row }">
			              <el-button v-if="hasDataFn('api/xxx/xxx','edit',row.id)" @click="doEdit(row)" type="primary">编辑</el-button>
			              <el-button v-if="hasDataFn('api/xxx/xxx','view',row.id)" @click="doDetail(row)" type="primary">详情</el-button>
			              <el-button v-if="hasDataFn('api/xxx/xxx','delete',row.id)" @click="doDelete(row)" type="primary">删除</el-button>
			            </template>
			          </el-table-column>
			      	</el-table>
			    </el-row>
			    <!-- 分页信息栏 -->
			    <el-row class="pagination-bar">
			        <el-col :span="8" class="page-info">显示第&nbsp;{{currentStart}}&nbsp;至&nbsp;{{currentEnd}}&nbsp;项结果，共&nbsp;{{table.total}}&nbsp;项</el-col>
			        <el-col :span="16" class="text-right">
			          <!-- 只有一页时，默认隐藏 -->
			          <el-pagination
			            hide-on-single-page
			            layout="prev,pager,next,jumper"
			            :total="table.total"
			            :current-page.sync="table.currentPage"
			            :page-size="table.pageSize"
			            @current-change="doSearch"
			          ></el-pagination>
			        </el-col>
			    </el-row>
		      	<el-dialog :title="dia.title" :visible.sync="dia.show" width="60%" :close-on-click-modal="false">
			        <el-form :model="form" status-icon :rules="rules" ref="form" class="demo-ruleForm">
			              <el-row :gutter="30">
			                <el-col :span="12">
			                  <el-form-item v-if="dia.type != 'detail'" label="项目名称:" prop="name" >
			                    <el-input type="text" v-model="form.name" autocomplete="off"  />
			                  </el-form-item>
			                  <div v-if="dia.type == 'detail'" class="form_panel">项目名称:&nbsp;&nbsp;{{form.name}}</div>
			                </el-col>
			              </el-row>
			              <el-row :gutter="30" v-if="dia.type == 'detail'">
			                <el-col :span="12">
			                  <div class="form_panel">状态:&nbsp;&nbsp;{{form.status}}</div>
			                </el-col>
			              </el-row>
			        </el-form>
		        	<div slot="footer" class="text-right">
		          		<el-button v-if="dia.type != 'detail'" type="primary" @click="doSave" icon="fas fa-check">保 存</el-button>
		          		<el-button v-if="dia.type != 'detail'" @click="dia.show=false" icon="fas fa-times">取 消</el-button>
		          		<el-button v-if="dia.type == 'detail'" @click="dia.show=false" icon="fas fa-times">关 闭</el-button>
		        	</div>
		      	</el-dialog>
		    </template>
		</vae-panel>
    </div>
</template>
<script>
const pageName = "modulesName_vueName" //格式：模板名称_vue文件名称，主容器id与名称一致改成小驼峰命名即可
export default {
	name: pageName,
	components: { },
	data() {
    	return{
    		query:{
    			keyword:'',//查询条件
    			status:'',
    		},
    		status_list:[],
    		loading:false,
    		dia:{
    			show:false,//dialog显示控制
    			type:'',//状态
    			title:'',//标题
    		},
    		table:{
    			data:[],//数据
    			total:0,//总条数
    			currentPage:1,//当前页码
    			pageSize:10,//每页条数
    		},
    		form:{
    			name:'',
    			status:'',
    		},
    		rules:{
		        name:[{required: true, message: '请输入名称', trigger: 'change' },
		        	{pattern:/^[a-z0-9]{3,8}/,message:'名称必须是数字或英文字母且长度3-8!'}],
		    },//表单验证
    		selectionIds:[],//选中行的id数组
    		selectionRows:[],//选中行的数据数组
    		vae_title:'页面名称',
    		org:{
    			show:true,//是否启用左侧组织机构
    			check:false,//是否多选
    			current_key:'',//默认选中
    		}
    	}
  	},
  	created(){
  		this.doSearch();
  	},
	methods:{
		//查询、请求表格数据
		doSearch(){
			let Condition = this.Condition.build();
		    Condition.inlk("name",this.query.keyword);
		    // 执行查询
		    this.loading = true;
		    //修改api地址
		    this.Server.findList('api/xxx/view',{
		        query: Condition.query(),
		        size: this.table.pageSize,
		        page: this.table.currentPage
		    }).then(data =>{
		        this.loading = false;
		        this.table.data = data.list;
		        this.table.total = data.length;
		    }).catch(err =>{
				this.loading = false;
		    	this.$err('操作失败')
		    })
		},
		//清空查询
		doResetSearch(){
			this.query.keyword = "";
			this.doSearch();
		},
		//新增
		doAdd(){
			this.dia.title = "新增";
			this.dia.type = "add";
			this.form = {
				name:'',
    			status:'',
			}
			this.dia.show = true;
		},
		//编辑
		doEdit(row){
			this.dia.title = "编辑";
			this.dia.type = "edit";
			this.form = Object.assign({},row);
			this.dia.show = true;
		},
		//详情
		doDetail(row){
			this.dia.title = "详情";
			this.dia.type = "detail";
			this.toGetDetail(row.id);
		},
		//获取详情数据 参数：id
		toGetDetail(id){
			//【注意】修改api地址
			this.Server.findOne("api/xxx/detail/"+id).then(data => {
				this.$suc('操作成功')
				this.form = Object.assign({},data);;
		        this.dia.show = true;
			})
		},
		//单条删除 参数：id
		doDelete(row){
			this.$confirm('是否删除该条记录?','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
            	//【注意】修改api地址
                this.Server.delete('api/xxx/'+row.id).then(v =>{
                    this.$suc("删除成功");
                    this.doSearch();
                })
            });
		},
		//批量删除 参数：id数组
		doDeleteBatch(){
			if (this.selectionIds.length > 0) {
		        this.$confirm("删除这些数据吗？", "提示", {
		        	type: "warning"
		        }).then(() => {
		        	//【注意】修改api地址
		        	this.Server.deleteBatch('api/xxx/delete',this.selectionIds).then(v => {
		            	this.$suc("删除成功");
		            	this.doSearch();
		        	})
		        })
		    } else {
		    	this.$warn('请至少选择一条记录!')
		    }
		},
		//新增、编辑保存
		doSave(){
			this.$refs.form.validate((valid) => {
        		if(valid){
        			if(this.dia.type == 'add'){
        				url = "";
        				this.Server.insert(url,this.form).then(v =>{
			              this.$suc("操作成功");
			              this.dia.show = false;
			              this.doSearch();
			            })
        			}else{
        				url = "";
        				this.Server.update(url,this.form).then(v =>{
			              this.$suc("操作成功");
			              this.dia.show = false;
			              this.doSearch();
			            })
        			}
        		}
        	})
		},
		// 表格行选中事件，记录选中的id数组和选中行数据数组
	    selectionChange(value) {
	      this.selectionIds = new Array();
	      this.selectionRows = [];
	      this.selectionRows = value;
	      value.forEach(v => {
	        this.selectionIds.push(v.id)
	      })
	    },
	    //选中组织机构的回调
	    orgChoose(val){

	    },
		// 格式化序列号
		formatterIndex(r, c, v, i) {
			return (this.table.currentPage - 1) * this.table.pageSize + i + 1
		},
	},
	computed: {
    	// 数据起点
    	currentStart() {
	      return this.table.total == 0
	        ? 0
	        : (this.table.currentPage - 1) * this.table.pageSize + 1;
	    },
	    // 数据终点
	    currentEnd() {
	      return this.currentStart == 0
	        ? 0
	        : (this.currentStart + this.table.pageSize - 1 > this.table.total) ? this.table.total : this.currentStart + this.table.pageSize - 1;
	    },
	},
}
</script>
<style scoped>
.form_panel{margin-bottom: 20px;font-size:14px;}
</style>